<template>
  <Fieldset legend="Colors" :toggleable="true">
    <template v-for="(value, key) in themeStore.TempTheme.primitive" :key="key">
      <section v-if="key !== 'borderRadius'" class="flex gap-4 justify-between items-center mb-4">
        <div class="flex gap-2 items-center">
          <span class="block w-20 text-sm capitalize">{{ key }}</span>
          <div class="flex items-center">
            <input
              :value="(previewColors[key] || themeStore.TempTheme.primitive[key])['500']"
              @input="e => onColorChange(e, key)"
              @change="e => onColorChangeEnd(e, key)"
              type="color"
            />
          </div>
        </div>
        <DesignColorPalette :value="previewColors[key] || themeStore.TempTheme.primitive[key]" />
      </section>
    </template>
  </Fieldset>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { palette } from '@primevue/themes'
  import DesignColorPalette from './DesignColorPalette.vue'
  import { useThemeStore } from '@/stores/useThemeStore'

  const themeStore = useThemeStore()
  const previewColors = ref<Record<string, any>>({ ...themeStore.TempTheme.primitive })

  const onColorChange = (event: Event, key: string) => {
    const inputElement = event.target as HTMLInputElement
    if (inputElement.value) {
      previewColors.value[key] = palette(inputElement.value)
    }
  }

  const onColorChangeEnd = (event: Event, key: string) => {
    const inputElement = event.target as HTMLInputElement
    // @ts-ignore
    themeStore.TempTheme.primitive[key] = palette(inputElement.value)
  }
</script>

<style scoped>
  [type='color'] {
    border: 0 none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  [type='color']::-webkit-color-swatch {
    border-radius: 4px;
    width: 24px;
    height: 24px;
    border: 0 none;
  }
</style>
